import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";


const ColorfulHistogramChart = ({
  title = "数据展示",
  name = "",
  data = []
}) => {
  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  const scores = data.map(item => parseInt(item.score));
  const max = Math.max(...scores);
  const min = Math.min(...scores);

  const getOption = data => {
    return {
      tooltip: {
        trigger: "item"
      },
      toolbox: {
        feature: {
          magicType: {
            type: ["line", "bar"]
          },
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {},
          restore: {}
        }
      },
      dataRange: {
        show: false,
        min: min,
        max: max,
        calculable: true,
        color: ["#d94e5d", "#eac736", "#50a3ba"],
        y: "center"
      },
      xAxis: [
        {
          type: "category",
          show: false,
          data: data.map(item => item.searchWord)
        }
      ],
      yAxis: [
        {
          type: "value",
          show: false
        }
      ],
      series: [
        {
          name: name,
          type: "bar",
          barGap: 0.1,
          barCategoryGap: 0.01,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "top",
                formatter: "{b}\n{c}"
              },
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          data: scores
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <ReactEcharts theme={theme} option={getOption(data)} />
    </ChartsWrap>
  );
};

export default ColorfulHistogramChart;
